<template>
  <div>
    <div class="m-t-10"></div>
    <div class="m-10">
      <v-chart class="chart" :option="option" />
    </div>
    <base-wrapper class="flex-center-center"> 请输入三个模型的权重 </base-wrapper>
    <base-wrapper class="flex-center-center">
      <el-row :gutter="20">
        <el-col :span="4" style="text-align: center; margin: auto; padding-bottom: 5px; padding-left: 70px"> lstm模型: </el-col>

        <el-col :span="4">
          <el-input v-model="w_lstm" class="w-200" placeholder="lstm模型" :prefix-icon="Histogram" />
        </el-col>

        <el-col :span="4" style="text-align: center; margin: auto; padding-bottom: 5px; padding-left: 70px"> 情绪分析: </el-col>

        <el-col :span="4">
          <el-input v-model="w_nlp" class="w-50" placeholder="情绪分析" :prefix-icon="Histogram" />
        </el-col>

        <el-col :span="4" style="text-align: center; margin: auto; padding-bottom: 5px; padding-left: 70px"> 语义分析: </el-col>

        <el-col :span="4">
          <el-input v-model="w_srl" class="w-50" placeholder="语义分析" :prefix-icon="Histogram" />
        </el-col>
      </el-row>
      <!-- <el-row :gutter="20">
        <el-col :span="12">


        </el-col>
        <el-col :span="12">
          <el-input v-model="w_lstm" class="w-200" placeholder="lstm模型" :prefix-icon="TrendCharts" />
          <el-input v-model="w_nlp" class="w-50" placeholder="情绪分析" :prefix-icon="TrendCharts" />
          <el-input v-model="w_srl" class="w-50" placeholder="语义分析" :prefix-icon="TrendCharts" />
        </el-col>
      </el-row> -->
    </base-wrapper>

    <base-wrapper class="flex-center-center">
      <el-row :gutter="20">
        <el-col :span="6" style="text-align: center; margin: auto; padding-bottom: 5px; padding-left: 5px"> 股票代码: </el-col>
        <el-col :span="12">
          <el-input v-model="input_code" class="w-100" placeholder="请输入股票代码" :prefix-icon="TrendCharts" />
        </el-col>
        <el-col :span="6">
          <el-button class="buttonDiv" type="primary" @click="handleClick">开始预测</el-button>
        </el-col>
      </el-row>
    </base-wrapper>
  </div>
</template>

<script setup>
import VChart from 'vue-echarts';
import { TrendCharts, Histogram } from '@element-plus/icons-vue';
const input_code = ref('600519');

const w_lstm = ref('0.2');
const w_nlp = ref('0.3');
const w_srl = ref('0.5');

const data = ref([
  { value: 30, date: '2024-01-05' },
  { value: 20, date: '2024-01-05' },
  { value: 40, date: '2024-01-06' },
  { value: 34, date: '2024-01-07' },
  { value: 23, date: '2024-01-08' },
  { value: 56, date: '2024-01-09' },
  { value: 47, date: '2024-01-10' },
  { value: 24, date: '2024-01-11' },
  { value: 50, date: '2024-01-12' },
  { value: 74, date: '2024-01-13' },
  { value: 79, date: '2024-01-14' },
  { value: 87, date: '2024-01-15' },
  { value: 66, date: '2024-01-16' },
  { value: 45, date: '2024-01-17' },
  { value: 33, date: '2024-01-18' },
]);

var itv = setInterval(() => {
  data.value = data.value.map((item) => ({
    ...item,
    value: Math.random() * 100,
  }));
}, 1000);

let res = $ref(null);
const { proxy } = getCurrentInstance();
async function handleClick() {
  res = await proxy.$api.comprehensive.getData(input_code, w_lstm, w_nlp, w_srl);
  data.value = res.data;
  clearInterval(itv);
}

let option = computed(() => {
  return {
    title: {
      text: '综合预测', //文本
      //文本样式设置
      textStyle: {
        color: '#333333', //颜色
        fontSize: 20, //字体大小
      },
      //位置
      left: 'center',
      top: '0',
    },
    //图例，图中的标记(symbol)，通常位于右上方，颜色和名字。可以通过点击图例控制哪些系列不显示。
    legend: {
      icon: 'rect', //形状
      orient: 'horizontal', //horizontal水平方向排列，vertical垂直方向排列
      itemGap: 25, //间距
      itemWidth: 15,
      itemHeight: 7,
      top: '10%',
      right: 0,
      borderRadius: 10,
      data: ['历史', '预测'], //如果不设置，会通过series系列数据自动生成
      textStyle: {
        color: 'black', //文字颜色
        fontSize: '20',
      },
      selectedMode: false, //控制是否可以通过点击图例改变图形的显示状态。默认开启，false可关闭。
    },
    //提示框，可以全局设置，也可设置在坐标系或系列数据中
    tooltip: {
      trigger: 'axis', //触发类型，'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用；'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
      axisPointer: {
        type: 'shadow', //提示类型：鼠标移入显示阴影
      },
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {},
      },
    },
    visualMap: {
      show: false,
      dimension: 0,
      pieces: [
        {
          lte: 9,
          color: 'blue',
        },
        {
          gt: 9,
          lte: 10,
          color: 'red',
        },
        {
          gt: 10,
          color: 'red',
        },
      ],
    },
    //用于区域缩放，从而能自由关注细节的数据信息，不常用
    // dataZoom: [
    //   {
    //     xAxisIndex: 0,
    //     show: false,  //是否展示dataZoom组件
    //     type: "slider",
    //     startValue: 0,
    //     endValue: 3
    //   }
    // ],
    xAxis: {
      type: 'category',
      // boundaryGap: false,
      data: data.value.map((d) => d.date),
      name: '日期',
    },
    yAxis: {
      type: 'value',
      name: '股票价格',
      min: 'dataMin', //取最小值为最小刻度
      max: 'dataMax', //取最大值为最大刻度
      scale: true, //自适应
    },
    series: [
      {
        name: '历史',
        data: data.value.map((d) => d.value),
        type: 'line',
        color: 'blue',
      },
      {
        name: '预测',
        data: [],
        type: 'line',
        color: 'red',
      },
    ],
  };
});
</script>

<style scoped>
.chart {
  height: 400px;
}
</style>
